<template>
  <view class="birthday-modal-wrap">
    <!-- :minDate="minDate" :maxDate="maxDate" -->
    <!-- :formatter="formatter" -->
    <u-datetime-picker
      ref="datetimePicker"
      :show="show_date"
      v-model="pop_birthday"
      mode="date"
      :minDate="minDate"
      :maxDate="maxDate"
      :title="title"
      itemHeight="42"
      visibleItemCount="8"
      :defaultIndex="defaultIndex"
      @confirm="doConfirmDate"
      @cancel="doConcelDate"
      confirmColor="#F49C0D"></u-datetime-picker>
  </view>
</template>

<script>
import util from "@/plugin/util.js";

export default {
  props: {
    title: {
      type: String,
      default: "选择生日",
    },
  },
  components: {},
  data() {
    return {
      pop_birthday: Number(new Date()) - 1000 * 60 * 60 * 24 * 365 * 25, //
      show_date: false,
      minDate: new Date().getTime() - 80 * 365 * 24 * 60 * 60 * 1000,
      maxDate: new Date().getTime(), // - 10 * 365 * 24 * 60 * 60 * 1000,
      defaultIndex: [10, 0, 0],
    };
  },
  watch: {},
  mounted() {
    // this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  methods: {
    init() {
      // this.pop_birthday = Number(new Date());
      this.show_date = true;
    },
    doConcelDate() {
      this.show_date = false;
    },
    doConfirmDate(e) {
      console.warn("pop_birthday", this.pop_birthday);
      console.warn("date", e);

      this.pop_birthday = e.value;
      this.$emit("confirm", util.formatMillisecondsToDate(e.value));

      this.show_date = false;
    },

    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.cus-pop-box {
  padding-top: 40rpx;

  .pop-title {
    margin-bottom: 30rpx;
    text-align: center;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }

  .pop-ctx {
    padding: 0 32rpx;

    &.pop-ctx-qudao {
      padding: 0;

      .xingbie-box {
        margin-bottom: calc(96rpx + constant(safe-area-inset-bottom));
        margin-bottom: calc(96rpx + env(safe-area-inset-bottom));
      }
    }

    .xingbie-box {
      margin-bottom: 150rpx;

      .items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 334rpx;
          height: 80rpx;
          background: #f6fafd;
          border-radius: 16rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #cb0011;
          border: 2rpx solid transparent;

          &.select {
            color: #fff;
            background: #cb0011;
          }
        }
      }
    }
  }

  .pop-foot {
  }
}
</style>
